<template>
  <van-search
    @search="handleSearch"
    v-model="searchValue"
    placeholder="请输入搜索关键词"
    class="search-box"
  >
    <template #left-icon>
      <div class="dropdown-trigger" @click="show = !show">
        <span>{{ selectedOption }}</span>
        <van-icon name="arrow-down" class="dropdown-icon" />
      </div>
    </template>
    <template #right-icon><van-icon name="search" @click="handleSearch" /></template>
  </van-search>
  <van-picker
    title="请选择你要搜索的选项"
    v-if="show"
    :columns="columns"
    @confirm="onConfirm"
    @cancel="show = false"
    class="picker"
  />
</template>
<script setup>
import { showToast } from 'vant'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const show = ref(false) //是否展示类型选择菜单
const selectedOption = ref('标题和内容') //搜索选中的类型
const searchValue = ref('') //搜索值
const columns = [
  { text: '标题和内容', value: '标题和内容' },
  { text: '上传者', value: '上传者' }
]
const router = useRouter()

const onConfirm = ({ selectedValues }) => {
  console.log(selectedValues[0])
  selectedOption.value = selectedValues[0]
  show.value = false
}
function handleSearch() {
  if (searchValue.value === '') {
    showToast('请输入关键词后再搜索')
    return
  }
  // 默认搜索课件
  if (selectedOption.value === '标题和内容') {
    return router.push(`/search-list?page=1&pageSize=6&queryName=${searchValue.value}&module=课件`)
  }
  if (selectedOption.value === '上传者') {
    return router.push(
      `/search-list?page=1&pageSize=6&queryUploader=${searchValue.value}&module=课件`
    )
  }
}
</script>
<style scoped>
.search-box {
  margin-top: 1rem;

}
.dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.picker {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 距离底部 0 */
  left: 0; /* 距离左边 0 */
  right: 0; /* 距离右边 0 */
  width: 100%; /* 宽度为 100% */
  background-color: #fff; /* 背景颜色，可以根据需要调整 */
  z-index: 1000; /* 确保它在其他内容之上 */
  padding: 10px; /* 内边距，可以根据需要调整 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影，提升视觉效果 */
}
</style>
